<template>
  <nav>
    <ul>
      <!-- 
        路由在当前匹配到to规则一样的时候 vue-router会给router-link添加一个样式名称
        默认名称为 router-link-active
        但是默认名称有点的长，不好记所以自定义了 active-class  自定义匹配路由和to相同时名称
       -->
      <router-link tag="li" exact to="/films/nowplaying" active-class="active">
        <span>猜你喜欢</span>
      </router-link>
      <router-link tag="li" to="/films/comingsoon" active-class="active">
        <span>全部类目</span>
      </router-link>
    </ul>
  </nav>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
nav {
  background: #fff;
  width: 100%;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #ccc;
  ul {
    display: flex;
    text-align: center;
    li {
      flex: 1;
      display: flex;
      justify-content: center;
      &.active{
        span{
          width: 40%;
          border-bottom: 2px solid red;
          display: block;
        }
      }
      
    }
  }
}
</style>